<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="form" label-width="140px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="卡名称">
              <el-input v-model="form.ticket_name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="支持兑换码">
              <el-select v-model="form.is_code" placeholder="请选择" clearable>
                <el-option
                  v-for="item in codeType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="支持优惠券">
              <el-select v-model="form.is_ticket" placeholder="请选择" clearable>
                <el-option
                  v-for="item in ticketType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="上架状态">
              <el-select v-model="form.status" placeholder="请选择">
                <el-option
                  v-for="item in OnShelfStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="配置日期" width="236">
              <el-date-picker
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                v-model="time"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- <el-form-item> -->
            <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
            <!-- v-if="hasPermission('AdminHospitalProvider.createHospital')" -->
            <Exprotcomponent :params="form" url="admin/card_ticket/export" type="php"></Exprotcomponent>
            <!-- <el-button @click="toRoutes('AddPlatformCard','add')" type="primary">添加</el-button> -->
            <router-link to="AddPlatformCard">
            <el-button style="margin-left:60px" type="primary">添加</el-button>
            </router-link>
            <!-- </el-form-item> -->
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <!-- table列表 -->
      <el-table :data="tableData" class="tableData" style="width: 100%">
        <el-table-column label="#" prop="id" align="center" />
        <el-table-column prop="name" label="卡名称" />
        <el-table-column prop="describe" label="卡描述" />
        <el-table-column prop="sale_price" label="卡售价" />
        <el-table-column prop="deduction_type" label="抵扣方式">
          <template slot-scope="scope">
            <span v-if="scope.row.deduction_type==0">不抵扣</span>
            <span v-if="scope.row.deduction_type==1">金币抵扣</span>
            <span v-if="scope.row.deduction_type==2">银币抵扣</span>
          </template>
        </el-table-column>
        <el-table-column prop="deduction_number" label="抵扣金额">
          <template slot-scope="scope">
            <span v-if="scope.row.deduction_type==0"></span>
            <span v-else>{{scope.row.deduction_number}}</span>
          </template>
        </el-table-column>
        <el-table-column label="支持兑换码抵扣" prop="is_use_code">
          <template slot-scope="scope">
            <el-switch
              @click.native="changeStatus(scope.row.id,'2')"
              v-model="scope.row.is_use_code"
              class="switchStyle"
              active-color="#13ce66"
              inactive-color="#eee"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column prop="code_count" align="center" label="关联兑换码">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="Openjum(scope.row,'bind_code')"
            >{{scope.row.code_count||0}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="支持优惠券抵扣">
          <template slot-scope="scope" prop="is_use_ticket">
            <el-switch
              v-model="scope.row.is_use_ticket"
              @click.native="changeStatus(scope.row.id,'3')"
              class="switchStyle"
              active-color="#13ce66"
              inactive-color="#eee"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column prop="ticket_count" align="center" label="关联优惠券">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="Openjum(scope.row,'bind_ticket')"
            >{{scope.row.ticket_count||0}}</el-button>
          </template>
        </el-table-column>
        <!-- // 0：下架  1：上架', -->
        <el-table-column label="上架状态" prop="status">
          <!--   -->
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              @click.native="changeStatus(scope.row.id,'1')"
              class="switchStyle"
              active-color="#13ce66"
              inactive-color="#eee"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column prop="sale_count" align="center" label="当前销量">
          <template slot-scope="scope">
            <el-button type="text" @click="Openjum(scope.row,'bind_sale_num')">{{scope.row.star||0}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="status_time" label="上架日期">
          <template slot-scope="scope">
            <span v-if="scope.row.status_time">{{(scope.row.status_time-0)*1000| date(1)}}</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <!-- v-if="hasPermission('AdminHospitalProvider.updateHospital')" -->
            <el-button
              v-if="scope.row.status == 0"
              type="text"
              size="small"
              @click="toRoutes('AddPlatformCard','edit',scope.row.id,'disabled')"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="listForm.pageNum"
            :page-sizes="page_sizes"
            :page-size="listForm.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <!-- //弹框 -->
      <!-- 关联详情弹窗 -->
      <el-dialog :title="amountType" :visible.sync="dividedDialogVisible" width="50%" center>
        <div>
          <!-- 关联兑换码 -->
          <el-table
            ref="bind_code"
            :data="tableDatas"
            style="width: 100%"
            v-loading="LoadingTable"
            border
            v-if="amountType=='关联兑换码'"
            :key="Math.random()"
          >
            <el-table-column label="兑换码" prop="code" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.code">{{scope.row.code.code }}</span>
              </template>
            </el-table-column>
            <el-table-column label="抵扣金额" prop="money" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.code">{{scope.row.code.money}}</span>
              </template>
            </el-table-column>
            <el-table-column label="当前状态" prop="status" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.code&&scope.row.code.status==0">未使用</span>
                <span v-if="scope.row.code&&scope.row.code.status==1">已使用</span>
              </template>
            </el-table-column>
            <el-table-column label="生效日期" prop="updated_at" align="center">
              <template slot-scope="scope">
                <span
                  v-if="scope.row.code"
                >{{(scope.row.code.start_time-0)*1000| date(1)}}-{{(scope.row.code.expiry_time-0)*1000| date(1)}}</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 关联优惠券 -->
          <el-table
            ref="bind_ticket"
            :data="tableDatas"
            style="width: 100%"
            v-loading="LoadingTable"
            border
            v-if="amountType=='关联优惠券'"
            :key="Math.random()"
          >
            <el-table-column label="优惠券名称" prop="type_name" align="center">
              <template slot-scope="scope">{{scope.row.ticket[0].type_name }}</template>
            </el-table-column>
            <el-table-column label="抵扣金额" prop="type_money" align="center">
              <template slot-scope="scope">{{scope.row.ticket[0].type_money}}</template>
            </el-table-column>
            <el-table-column label="发放数量" prop="ticket_used" align="center">
              <template slot-scope="scope">{{scope.row.ticket[0].ticket_used}}</template>
            </el-table-column>
            <el-table-column label="有效期" prop="start_ticket_time" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.ticket[0].start_ticket_time}}-{{scope.row.ticket[0].end_ticket_time}}</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 当前销量 -->
          <el-table
            ref="bind_sale_num"
            :data="tableDatas"
            style="width: 100%"
            v-loading="LoadingTable"
            border
            v-if="amountType=='当前销量'"
            :key="Math.random()"
          >
            <el-table-column label="用户名" prop="realname" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.user">{{scope.row.user.realname || scope.row.user.nickname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="手机号" prop="username" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.user">{{scope.row.user.username}}</span>
              </template>
            </el-table-column>
            <el-table-column label="购买卡名称" prop="goods_name" align="center">
            </el-table-column>
            <el-table-column label="购买卡数量" prop="goods_num" align="center" />
            <el-table-column label="购买卡日期" prop="created_at" align="center">
              <template slot-scope="scope">{{(scope.row.created_at-0)*1000| date(1) }}</template>
            </el-table-column>
            <el-table-column label="有效日期" prop="validity_start_time" align="center">
              <template slot-scope="scope">
                <span>{{(scope.row.validity_start_time-0)*1000| date(1)}}-{{(scope.row.validity_end_time-0)*1000| date(1)}}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="params.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="params.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
          />
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import filter from "@/assets/filter";
import {
  getList,
  bind_code,
  bind_sale_num,
  bind_ticket,
  getSwitch
} from "@/api/cardMange";

export default {
  name: "platformCard",
  filters: {
    cardType: function(e) {
      return window.helper.cardType(e);
    },
    // 0为未审核 1为审核通过  2为审核驳回
    RS: function(e) {
      switch (e) {
        case 0:
          return "未审核";
        case 1:
          return "审核通过";
        case 2:
          return "审核驳回";
        default:
          return "暂无";
      }
    }
  },
  data() {
    return {
      offLoad: true,
      tableLoading: true,
      officeOption: [],
      tagOption: [],
      time: "",
      codeType: [
        {
          value: "0",
          label: "否"
        },
        {
          value: "1",
          label: "是"
        }
      ],
      ticketType: [
        {
          value: "0",
          label: "否"
        },
        {
          value: "1",
          label: "是"
        }
      ],
      //  0：下架  1：上架',
      OnShelfStatus: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "0",
          label: "下架"
        },
        {
          value: "1",
          label: "上架"
        }
      ],
      dividedDialogVisible: false,
      LoadingTable: true,
      form: {
        type: 1,
        ticket_name: "",
        is_code: "",
        is_ticket: "",
        status: "",
        created_at: [],
        page: 1,
        pagesize: 10
      },
      params: { page: 1, pagesize: 10 },
      type: "",
      tableData: [],
      tableDatas: [],
      amountType: "",
      page_sizes: [10, 30, 50, 100],
      page_totals: 0,
      total: 0,
      listForm: {
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  mounted() {
    this.getList(this.form);
  },
  methods: {
    // 按钮权限
    hasPermission(e) {
      return window.helper.hasPermission(e);
    },
    // 上下架与状态修改
    changeStatus(id, type) {
      const datas = {
        id: id + "",
        field: type
      };
      // datas[type] = status + "";
      getSwitch(datas).then(res => {
        if (res.data.code === 200) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
          this.getList(this.form);
        } else {
          this.$message.error(res.data.msg);
          // this.status=!this.status
          this.getList(this.form);
        }
      });
      console.log(datas);
    },
    async Openjum(datas, Type) {
      this.dividedDialogVisible = true;
      let res;
      this.params.id = datas.id;
      this.params.pagesize = 10;
      this.params.page = 1;
      this.amountType = "";
      if (Type == "bind_sale_num") {
        //当前销量
        this.amountType = "当前销量";
        res = await bind_sale_num(this.params).then(res => {
          this.commfn(res);
        });
      }
      if (Type == "bind_code") {
        //当前销量
        this.amountType = "关联兑换码";
        res = await bind_code(this.params).then(res => {
          this.commfn(res);
        });
      }
      if (Type == "bind_ticket") {
        //当前销量
        this.amountType = "关联优惠券";
        res = await bind_ticket(this.params).then(res => {
          this.commfn(res);
        });
      }
    },
    commfn(res) {
      if (res.data.code == 200) {
      console.log("详情res", res);
      this.tableDatas = res.data.data.data;
      this.total = res.data.data.total;
      this.LoadingTable = false;

      }
    },
    // 成功状态弹窗
    succStatus(txt) {
      this.$message({
        message: txt + "成功",
        type: "success"
      });
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.$message.error(txt + "失败");
    },
    // 查询
    searchFn() {
      this.form.created_at = this.time
        ? this.time[0] + " - " + this.time[1]
        : [];
      this.form.page = 1;
      let datas = { ...this.form };
      // datas.status=1
      this.getList(datas);
    },
    // 路由跳转
    toRoutes(e, type, userId, tname) {
      console.log("type", type);
      const route = {
        name: e,
        query: { type: type, userId: (userId - 0)?userId - 0:null, disabled: tname }
      };
      this.$router.push(route);
    },
    // 列表数据获取
    getList(opt) {
      getList(this.form)
        .then(res => {
          console.log("res", res.data.data.data);
          if (res.data.code == 200) {
            this.tableData = res.data.data.data;
            this.page_totals = res.data.data.total;
            this.tableLoading = false;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(error => {
          this.tableLoading = false;
          this.$message.error(error.msg);
        });
    },
    // 删除
    deleteFn(e) {
      const datas = {
        id: e
      };
      this.$confirm("删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteData(datas)
            .then(res => {
              console.log(res);
              if (!res.data.code) {
                this.succStatus("删除");
                this.getList(this.form);
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(error => {
              this.$message.error(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.pagesize = val;
      this.getList(this.form);
    },
    handleSizeChange2(val) {
      this.params.pagesize = 10;
      this.Openjum(this.params);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.page = val;
      let datas = { ...this.form };
      this.getList(datas);
    },
    // 选择页数
    handleCurrentChange2(val) {
      this.params.page = 1;
      // let datas = { ...this.params };
      this.Openjum(this.params);
    }
  }
};
</script>
<style scoped>
/* 分页 */
.pagesCon {
  height: 40px;
  margin-top: 20px;
}
.pagesCon > div {
  float: right;
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  /* width: 350px; */
  width: 236px;
}
</style>
